<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Documentation - Nifty - admin Template </title>

        <!-- CSS -->
        <link href="../demo/css/bootstrap.min.css" rel="stylesheet">

        <link href="../demo/css/nifty.min.css" rel="stylesheet">
        <link href="../demo/plugins/animate-css/animate.min.css" rel="stylesheet">
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <!--<link href="css/monokai.css" rel="stylesheet">-->
        <link href="css/atelier-cave-light.min.css" rel="stylesheet">

        <!--Open Sans Font [ OPTIONAL ] -->
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet">

        <!-- Custom styles for documentation -->
        <link href="css/documentation.css" rel="stylesheet">
    </head>
    <body>
        <div id="container" class="effect boxed-layout mainnav-lg mainnav-fixed">
            <header id="navbar">
                <div class="boxed" id="navbar-container">
                    <div class="navbar-header">
                        <div class="navbar-brand" href="index.html">
                            <p class="pad-all text-semibold text-light">Documentation</p>
                        </div>
                    </div>
                </div>
            </header>
            <div class="boxed">
                <nav id="mainnav-container">
                    <div id="mainnav">
                        <div id="mainnav-menu-wrap">
                            <div class="nano">
                                <div id="nav-scroll" class="nano-content">
                                    <ul id="mainnav-menu" class="list-group nav">
                                        <li><a href="#nifty-intro"><span class="menu-title">Contact Us</span></a></li>
                                        <li><a href="#changelogs"><span class="menu-title">Change Logs</span></a></li>
                                        <li class="list-divider"></li>
                                        <li><a href="#introduction"><span class="menu-title">Introduction</span></a></li>
                                        <li><a href="#docs-quick-tips"><span class="menu-title">Quick Tips</span></a></li>
                                        <li><a href="#fileFolderStructure"><span class="menu-title">File and Folder Structure</span></a></li>
                                        <li class="list-divider"></li>
                                        <li><a href="#docs-less"><span class="menu-title">LESS &amp; SASS Files</span></a></li>
                                        <li><a href="#template"><span class="menu-title">Template</span></a></li>
                                        <li><a href="#docs-anim"><span class="menu-title">Animation</span></a></li>
                                        <li class="list-divider"></li>
                                        <li><a href="#content-navbar"><span class="menu-title">Navbar</span></a></li>
                                        <li class="has-sub">
                                            <a href="#"><span class="menu-title">Navigation</span><i class="arrow"></i></a>
                                            <ul class="collapse">
                                                <li><a href="#nav-colex">Collapsing/Expanding</a></li>
                                                <li><a href="#nav-offcanvas">Off Canvas</a></li>
                                                <li><a href="#nav-fixed">Fixed Position</a></li>
                                                <li><a href="#nav-short">Shortcuts</a></li>
                                                <li><a href="#nav-widget">Widgets</a></li>
                                            </ul>
                                        </li>
                                        <li class="has-sub">
                                            <a href="#"><span class="menu-title">Aside</span><i class="arrow"></i></a>
                                            <ul class="collapse">
                                                <li><a href="#docs-aside-visibility">Visibility</a></li>
                                                <li><a href="#docs-aside-aligned">Aligned</a></li>
                                                <li><a href="#docs-aside-fixed">Fixed Position</a></li>
                                                <li><a href="#docs-aside-themes">Themes</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#docs-footer"><span class="menu-title">Footer</span></a></li>
                                        <li class="list-divider"></li>
                                        <li><a href="#docs-ui-btn"><span class="menu-title">Buttons</span></a></li>
                                        <li class="list-divider"></li>
                                        <li class="has-sub">
                                            <a href="#"><span class="menu-title">Exclusive Plugins</span><i class="arrow"></i></a>
                                            <ul class="collapse">
                                                <li><a href="#docs-scroll-top">Nifty Scroll to top</a></li>
                                                <li><a href="#docs-panel-removal">Nifty Panel removal</a></li>
                                                <li><a href="#docs-overlay">Nifty Overlay</a></li>
                                                <li><a href="#docs-noty">Nifty Notification</a></li>
                                                <li><a href="#docs-check">Nifty Check</a></li>
                                                <li><a href="#docs-lang">Nifty Language Selector</a></li>
                                            </ul>
                                        </li>
                                        <li class="list-divider"></li>
                                        <li><a href="#docs-3rd-plugins"><span class="menu-title">Third Party Plugins &amp; Credits</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
                <div id="content-container">
                    <div id="page-content" data-target="#docs-menu" data-spy="scroll">
                        <div id="nifty-intro" class="docs-section">

                            <!--INTRO-->
                            <!--=================================================================================-->
                            <h1 class="box-inline mar-rgt" style="vertical-align: middle">Nifty</h1><p class="label label-primary">v2.5</p>
                            <div class="text-lg">Responsive Admin Template</div>


                            <hr class="new-section-sm">


                            <!--CONTACT US-->
                            <!--=================================================================================-->
                            <div class="pad-all mar-top text-center text-lg text-main text-semibold">
                                Thank you very much for purchasing this theme.
                            </div>
                            <div class="text-center bg-dark pad-all">
                                <div class="pad-btm">
                                    <h2><i class="text-light fa fa-question-circle fa-3x"></i></h2>
                                    <h3 class="text-light text-bold">Have a question ?</h3>
                                </div>
                                <p>If you have any questions or issues that are beyond the scope of this documentation, please feel free to email us.</p>
                                <p class="pad-btm"><em>* Support is offered exclusively through the contact form</em></p>
                            </div>
                            <a href="https://wrapbootstrap.com/user/ThemeOn"  target="_blank" class="btn btn-info btn-lg btn-block">Contact Us</a>



                            <!--CHANGELOGS-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h3 id="changelogs" class="docs-spy">Change Logs</h3>
                                <hr>

                                <!--Version 2.5-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver25">
                                        <h4 class="text-bold pull-left mar-no"><i class="fa fa-star icon-fw"></i><em class="text-sm">Version 2.5</em></h4>
                                    </button>
                                    <div id="ver25" class="collapse in">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Profile picture in navigation bar</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Boxed layout with background image</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Floating Aside</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Fixed Fluid Grid System</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Toggle Switch Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Magic Check Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Select2 Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Bootstrap Markdown</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Email Templates</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>jQuery to version 2.2.4</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Font Awesome to version 4.6.3</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Metismenu to version 2.5.2</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Pace to version 0.7.6</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Animate.css to version 3.5.2</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Web performance</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Add more helper classes</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>GUI appearance to all elements</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Increase Contrast of color schemes</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Incorrect brand size on the SASS/SCSS files</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>IE keep showing nav badge although on the collapsed mode</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Issues when the animations are disabled.</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Prevent page scrolling when the navigation bar is fixed to the top</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.4.1-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver241">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.4.1</em></h4>
                                    </button>
                                    <div id="ver241" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>User Interface Design</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Issue with Datepicker initialization</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Minor CSS issues</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.4-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver24">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.4</em></h4>
                                    </button>
                                    <div id="ver24" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Boxed Layout</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>IonIcon Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Themify Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>2000+ Premium Icon Sets</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>jQuery to version 2.2.1</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Bootstrap to version 3.3.6</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Animate.css to version 3.5.1</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>FontAwesome to version 4.6.1</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Datepicker Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Bootstrap Select Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Bootstrap Table Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>TagInput Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Chosen Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>DropzoneJS Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Summernote Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Fastclick Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Metismenu Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>NanoScroller Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Pace Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Switchery Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>UI and CSS transitions</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Documentation</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.3-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver23">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.3</em></h4>
                                    </button>
                                    <div id="ver23" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Support SASS and SCSS</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Fully Layered and Editable Dashboard (PSD) file</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>FontAwesome to the latest version</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>User Interface Design</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Minor CSS issues</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.2.3-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver223">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.2.3</em></h4>
                                    </button>
                                    <div id="ver223" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>UI and CSS transitions</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Documentation</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Noftification plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Navigation toggle button issue on mobile device</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Minor CSS issues</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.2.2-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver222">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.2.2</em></h4>
                                    </button>
                                    <div id="ver222" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Documentation</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Navigation with Ajax Support</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Checkboxes and radio button components</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Initialization issues on some framework.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.2.1-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver221">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.2.1</em></h4>
                                    </button>
                                    <div id="ver221" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Remove Fade-in effect when a page has loaded</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Aside issue on small screen</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Minor CSS issues</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.2-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver22">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.2</em></h4>
                                    </button>
                                    <div id="ver22" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Bootstrap to version 3.3.2</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>FontAwesome to version 4.3.0</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Two column timeline</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Static tables page</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Bootstrap tables page</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>DataTables plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>FooTable plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>FullCalendar plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Maps plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>9 new color schemes</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>UI and CSS transitions</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Checkboxes and radio plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Megamenu plugin for touch devices</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Fresh flat color schemes</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Issue with scrolling items on touch devices</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Minor CSS issue</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.1-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver21">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.1</em></h4>
                                    </button>
                                    <div id="ver21" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Getting Started sample</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Header GUI design</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Plugin compatibility</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Change folder structure and HTML code slightly</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>MetisMenu plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Switchery plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>EasyPieChart plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Chosen plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Pace plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Datepicker plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>MaskInput plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Bootstrap DataTable plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Off-canvas navigation and aside issue</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.0.1-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver201">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.0.1</em></h4>
                                    </button>
                                    <div id="ver201" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Add more widgets to Dashboard</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-info">Improved</div></td>
                                                    <td>Clean and fresh flat color schemes</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Collapsed navigation doesn't show menu sub-items on the iPad</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Minor CSS issue</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 2.0-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver20">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 2.0</em></h4>
                                    </button>
                                    <div id="ver20" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-purple">Updated</div></td>
                                                    <td>Bootstrap to version 3.3.1</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>To-do List</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>New statistics widgets</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>User profile widgets</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>New weather Widgets</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Pricing table</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Megamenu Plugin</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Layouts page</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>List group page</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>Progressbar Page</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-success">New</div></td>
                                                    <td>jQuery cookie</td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>- User can make best theme by mix the style and color</td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td>- Remember user's favourite theme and apply it to all pages</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Speed improvements</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Progressbar with label</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Tab direction</td>
                                                </tr>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-warning">Fixed</div></td>
                                                    <td>Minor bugs in design</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!--Version 1.0-->
                                <!---------------------------------------------------------->
                                <div class="pad-btm">
                                    <button class="btn btn-trans btn-block mar-btm pad-no" type="button" data-toggle="collapse" data-target="#ver10">
                                        <h4 class="text-muted text-bold pull-left mar-no"><i class="fa fa-bars icon-fw"></i><em class="text-sm">Version 1.0</em></h4>
                                    </button>
                                    <div id="ver10" class="collapse">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr>
                                                    <td class="chlog-label"><div class="label label-table label-mint">Release</div></td>
                                                    <td>Initial release</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>


                            <!--INTRODUCTION-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="introduction" class="docs-spy">Introduction</h1>
                                <hr>
                                <p>
                                    <strong class="text-main">Nifty</strong> is  is flat admin template for multi-purpose usage built with the latest version of <span class="text-purple text-bold">Bootstrap v3.3.6.</span><br>
                                    Its main focus is simplicity while providing the most commonly used elements and widgets on web apps across devices and browsers, and it will be extended in the future updates with newer plugins and pages.</p>
                                <br>
                                <h3>Getting Started</h3>
                                <p>To get you started with Nifty theme, you should be familiar with <a target="_blank" href="http://www.getbootstrap.com" class="btn-link text-semibold">Twitter Bootstrap</a>.
                                    Start with this basic HTML template, or modify <a href="../get-started/index.html" class="text-semibold btn-link">these examples</a>.</p>
                                <br>
                                <p>Use <strong class="text-main">Chrome Developer Tools (Chrome), Firebug (Firefox)</strong> or similar plugins to analyze the code. To get a deeper understanding of the code, open the HTML and JS files and read through the commented code.</p>
                            </div>




                            <!--QUICK TIPS-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="docs-quick-tips" class="docs-spy">Quick Tips</h1>
                                <hr>
                                <ul class="list-group list-unstyled">
                                    <li class="pad-btm">
                                        <h4>Mobile First</h4>
                                        The default CSS styles work great in mobiles. The responsive CSS code alter the styles in larger resolutions.
                                    </li>
                                    <li class="pad-btm">
                                        <h4>ID and Class name</h4>
                                        You may remove all ID or Class names which contain <code>demo-</code>, they are only used for demonstration.
                                    </li>
                                    <li class="pad-btm">
                                        <h4>Plugins</h4>
                                        Feel free to remove the plugins you won't use (along with their style).
                                    </li>
                                    <li>
                                        <h4>User Names</h4>
                                        All user names used in the template are fictional and only used for demostration. They were randomly generated at <a href="http://uinames.com/" class="btn-link text-semibold">uinames.com</a>.
                                    </li>
                                </ul>
                            </div>




                            <!--FILE AND FOLDER STRUCTURE-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="fileFolderStructure" class="docs-spy">File and Folder Structure</h1>
                                <hr>
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>Folder Name</th>
                                            <th>What it Contains</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Documentation</td>
                                            <td>This documentation page with it's assets.</td>
                                        </tr>
                                        <tr>
                                            <td>Get Started</td>
                                            <td>Samples that will help you start developing.</td>
                                        </tr>
                                        <tr>
                                            <td>Demo</td>
                                            <td>Most of the main CSS, JavaScript and images.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child">css</td>
                                            <td>Main CSS stylesheets.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child2">demo</td>
                                            <td>Stylesheet for demonstration purposes.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child">fonts</td>
                                            <td><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank" class="btn-link">Font Awesome</a></td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child">img</td>
                                            <td>Main images for demonstration purposes.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child">js</td>
                                            <td>Main JavaScript files.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child2">demo</td>
                                            <td>Sample script for demonstration purposes.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child">LESS / SASS / SCSS</td>
                                            <td>Pre-processing sources files for generating the CSS-files.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child2">nifty</td>
                                            <td>Complete layout and element-styling</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child2">themes</td>
                                            <td>Folder that contains all the available color schemes.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child">plugins</td>
                                            <td>JavaScript and partial images for all 3rd-party plugins.</td>
                                        </tr>
                                        <tr>
                                            <td class="fol-child">premium</td>
                                            <td>Contains our premium content free for use in your project.<br>Please read carefully the license agreement!</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>




                            <!--FILE AND FOLDER STRUCTURE-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h2 id="docs-less" class="docs-spy">LESS, SASS and SCSS Files</h2>
                                <hr>
                                <h3>Files and Structure</h3>
                                <br>
                                <h4>less/nifty</h4>
                                <p>Folder that contains all main styles of the template. </p>
                                <br>
                                <h4>less/themes</h4>
                                <p>Folder that contains all the available color themes. Each file contains predefined variables with the colors of each theme. A file can be imported in <code>/less/nifty.less</code> to change the active color theme by overwriting the default variables which are set in <code>less/_variables.less</code>. </p>
                                <br>
                                <h4>less / _variables.less</h4>
                                <p>This is the variables file. From here you can set various variables to easily change the colors or other template options.</p>
                                <br>
                                <h4>less / nifty.less</h4>
                                <p>This is the only Less file that needs to be included in the template since it imports all required files. Here you can import a separate color theme file from <code>less/themes/</code> folder, to overwrite the default color variables and change the active color theme. </p>
                                <br>
                                <h4>less / themes / {type} / {theme-name}.less</h4>
                                <p>This is the themes file. It contains classes that can be used to alter the color, the background color or the border color of an element individually. It contains main colors of all the available themes. </p>
                                <br>
                                <hr>
                                <h3>Recompile LESS</h3>
                                <p>First of all you should be aware of the structure from the LESS-file.</p>
                                <p>So you will see that whenever you change a file in <code>less</code> you must only recompile <code>less/nifty.less</code> because it imports all other files. Same with <code>less/_variables.less</code>. Save the compiled less as <code>css/nifty.css</code>.</p>
                                <div class="alert alert-info">
                                    <div><p class="text-semibold">INFO : </p><p>If you make changes directly in the CSS and/ or LESS-files from Nifty, it will be hard to update if we release an update.<br> So we would recommend to create a new CSS/ LESS-file for this purpose.</p></div>
                                </div>
                                <hr>
                                <h3>Color Themes</h3>
                                <p>You must only recompile <code>less/themes/type-*/*.less</code>. <br>To create your own, simply copy-paste one of the existing, give it a new name and alter the colors to match your preference.</p>
                            </div>




                            <!--TEMPLATE-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="template" class="docs-spy">Template</h1>
                                <hr>
                                <p>All template files have a fixed structure consisting of <code>navbar</code>, <code>mainnav</code> and <code>content</code>, <br>
                                    while for <code>aside</code> and <code>footer</code> is just extra if you need it.
                                </p>
                                <div class="img-holder mar-ver pad-top">
                                    <img class="img-responsive" src="img/doc-template.png" alt="images">
                                </div>
                            </div>




                            <!--ANIMATION-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="docs-anim" class="docs-spy">Animation</h1>
                                <hr>
                                <p>There are several animations in Nifty admin template. Simply add class name <code>effect</code> in the <code>#container</code>, if necessary combined with transition function names.</p>
                                <br>
                                <p>To disable the animations in the navigation and sidebar, simply by removing the class <code>.effect</code> and the transition function names on the <code>#container</code>.</p>
                                <br>
                                <table class="table table-bordered table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 250px;">Transition function name</th>
                                            <th>Class name</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>ease</td>
                                            <td><code>.effect</code></td>
                                        </tr>
                                        <tr>
                                            <td>easeInQuart</td>
                                            <td><code>.easeInQuart</code></td>
                                        </tr>
                                        <tr>
                                            <td>easeOutQuart</td>
                                            <td><code>.easeOutQuart</code></td>
                                        </tr>
                                        <tr>
                                            <td>easeInBack</td>
                                            <td><code>.easeInBack</code></td>
                                        </tr>
                                        <tr>
                                            <td>easeOutBack</td>
                                            <td><code>.easeOutBack</code></td>
                                        </tr>
                                        <tr>
                                            <td>easeInOutBack</td>
                                            <td><code>.easeInOutBack</code></td>
                                        </tr>
                                        <tr>
                                            <td>steps</td>
                                            <td><code>.steps</code></td>
                                        </tr>
                                        <tr>
                                            <td>jumping</td>
                                            <td><code>.jumping</code></td>
                                        </tr>
                                        <tr>
                                            <td>rubber</td>
                                            <td><code>.rubber</code></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="alert alert-info">
                                    <p class="text-bold">INFO</p>
                                    <p class="alert-message">Because there are many mobile devices with low hardware. We don't activate animations features on mobile devices.</p>
                                    <p class="alert-message">Please have a look at the <a href="http://daneden.github.io/animate.css/" target="_blank" class="alert-link">Animate.css</a>, for animation on bootbox modal etc..</p>
                                </div>
                            </div>




                            <!--NAVBAR-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="content-navbar" class="docs-spy">Navbar (Top Navigation Bar)</h1>
                                <hr>
                                <p>There are two options for the navbar : <code>static</code> and <code>fixed</code> to the top page. The default is static position.</p>

                                <p> Please add class <code>.navbar-fixed</code> to the <code>#container</code> to make it fixed to the top of page.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="navbar-fixed">
    ...
    ...
    &lt;/div>
&lt;/body>
</pre>
                            </div>




                            <!--NAVIGATION-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="nav-colex" class="docs-spy">Navigation</h1>
                                <hr>
                                <h3>General Methods</h3>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>JavaScript</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><pre class="prettyprint pre-trans">$.niftyNav('bind');</pre></td>
                                            <td>Bind or re-bind the navigation</td>
                                        </tr>
                                        <tr>
                                            <td><pre class="prettyprint pre-trans">$.niftyNav('refresh');</pre></td>
                                            <td>Refresh the navigation</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="docs-section">
                                <h3>Collapsing/Expanding Navigation</h3>
                                <p>For small devices screen sizes, the navigation will only be visible if activated by the top right menu icon. This is especially handy for distraction-free mobile reading. </p>
                                <p>To start page with expanded navigation by default, just add class <code>.mainnav-lg</code> to <code>#container</code>, or <code>.mainnav-sm</code> to collapsed the navigation by default.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="mainnav-lg">
    ...
    ...
    &lt;/div>
&lt;/body>
</pre>
                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Call the navigation plugin via JavaScript</p>
                                <pre class="prettyprint">$.niftyNav('collapse');

$.niftyNav('expand');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the navigation via JavaScript. It will toggle between two states: collapsed and expanded.</p>
                                <pre class="prettyprint">$.niftyNav('colExpToggle');</pre>
                            </div>





                            <!--OFF CANVAS NAVIGATION-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h3 id="nav-offcanvas" class="docs-spy">Off Canvas Navigation</h3>
                                <hr>
                                <p>The navigation that responsively goes off canvas, similar to an app style menu also can be revealed in many creative ways. There are three mode of off-canvas navigation.</p>


                                <!--PUSH-->
                                <!--=================================================================================-->
                                <hr class="new-section-sm bord-no">
                                <h3>1. Push</h3>
                                <p>The navigation will push page content to the right. Add class <code>.mainnav-in</code> to the <code>#container</code> to show the navigation or <code>.mainnav-out</code> to hide the navigation by default.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="mainnav-in push">
    ...
    ...
    &lt;/div>
&lt;/body>
</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Button</h4>
                                <p>You can create a toggle button in your application by adding <code>.mainnav-toggle.push</code> as an class to the button without using any JavaScript.</p>
                                <pre class="prettyprint">&lt;a href="#" class="btn mainnav-toggle push">Toggle Navigation&lt;/a>

&lt;!-- OR -->

&lt;button class="btn mainnav-toggle push">Toggle Navigation&lt;/button>
</pre>


                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch between navigation mode via JavaScript</p>
                                <pre class="prettyprint">
$.niftyNav('pushIn');

$.niftyNav('pushOut');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the navigation via JavaScript. It will toggle between two states: <code>push-in</code> and <code>push-out</code>.</p>
                                <pre class="prettyprint">$.niftyNav('pushToggle');</pre>




                                <!--SLIDE IN ON TOP-->
                                <!--=================================================================================-->
                                <hr class="new-section-lg bord-no">
                                <h3>2. Slide in on top</h3>
                                <hr>
                                <p>Add class <code>.mainnav-in</code> to the <code>#container</code> to show the navigation or <code>.mainnav-out</code> to hide the navigation by default.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="slide mainnav-in">
    ...
    ...
    &lt;/div>
&lt;/body>
</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Button</h4>
                                <p>You can create a toggle button in your application by adding <code>.mainnav-toggle.slide</code> as an class to the button without using any JavaScript.</p>
                                <pre class="prettyprint">&lt;a href="#" class="btn mainnav-toggle slide">Toggle Slide&lt;/a>

&lt;!-- OR -->

&lt;button class="btn mainnav-toggle slide">Toggle Slide&lt;/button>
</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch between navigation mode via JavaScript</p>
                                <pre class="prettyprint">
$.niftyNav('slideIn');

$.niftyNav('slideOut');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the navigation via JavaScript. It will toggle between two states: <code>slide-in</code> and <code>slide-out</code>.</p>
                                <pre class="prettyprint">$.niftyNav('slideToggle');</pre>




                                <!--REVEAL-->
                                <!--=================================================================================-->
                                <hr class="new-section-lg bord-no">

                                <h3>3. Reveal</h3>
                                <hr>
                                <p>Add class <code>.mainnav-in</code> to the <code>#container</code> to show the navigation or <code>.mainnav-out</code> to hide the navigation by default.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="reveal mainnav-in">
    ...
    ...
    &lt;/div>
&lt;/body>
</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Button</h4>
                                <p>You can create a toggle button in your application by adding <code>.mainnav-toggle.reveal</code> as an class to the button without using any JavaScript.</p>
                                <pre class="prettyprint">&lt;a href="#" class="btn mainnav-toggle reveal">Toggle Reveal&lt;/a>

&lt;!-- OR -->

&lt;button class="btn mainnav-toggle reveal">Toggle Reveal&lt;/button>
</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch between navigation mode via JavaScript</p>
                                <pre class="prettyprint">
$.niftyNav('revealIn');

$.niftyNav('revealOut');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the navigation via JavaScript. It will toggle between two states: <code>reveal-in</code> and <code>reveal-out</code>.</p>
                                <pre class="prettyprint">$.niftyNav('revealToggle');</pre>

                            </div>




                            <!--FIXED POSITION-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h3 id="nav-fixed" class="docs-spy">Fixed Position</h3>
                                <hr>
                                <p>There are two options for the navigation position : static and fixed to the top page. The default is static position.<br>
                                    <code>Static</code> As you scroll down the site, so does the navigation.
                                    <code>Fixed</code> As you scroll down the site, the navigation stays fixed in place,
                                    so that it's always displaying, no matter where you are on the page.
                                </p>
                                <br>
                                <p>Add class <code>.mainnav-fixed</code> to the <code>#container</code> it fixed to the top of page.</p>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="mainnav-fixed">
    ...
    ...
    &lt;/div>
&lt;/body>
</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch the navigation position state via JavaScript</p>
                                <pre class="prettyprint">
$.niftyNav('staticPosition');

$.niftyNav('fixedPosition');
</pre>
                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the navigation position via JavaScript. It will toggle between two states: <code>fixed</code> and <code>static</code>.</p>
                                <pre class="prettyprint">$.niftyNav('togglePosition');</pre>
                            </div>




                            <div class="docs-section">
                                <h3 id="nav-short" class="docs-spy">Shortcuts</h3>
                                <hr>
                                <h4>Shortcut buttons</h4>
                                <p>Add more shortcut buttons to the navigation, it supports up to six buttons.</p>
                                <div class="pad-ver">
                                    <img class="mar-rgt pad-rgt" src="img/doc-shortcut-btn.jpg" alt="image">
                                    <img src="img/doc-shortcut-btn-2.jpg" alt="image">
                                </div>

                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;div id="mainnav-shortcut">
    &lt;ul class="list-unstyled">

        &lt;!-- Shortcut buttton-->
        &lt;!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        &lt;li class="col-xs-2" data-content="Button 1">
            &lt;a class="shortcut-grid" href="#" >
                &lt;i class="fa fa-music">&lt;/i>
            &lt;/a>
        &lt;/li>

        &lt;!-- Shortcut buttton-->
        &lt;!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        &lt;li class="col-xs-2" data-content="Button 2">
            &lt;a href="#" class="shortcut-grid">
                &lt;i class="fa fa-star">&lt;/i>
            &lt;/a>
        &lt;/li>

        &lt;!-- Shortcut buttton-->
        &lt;!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        &lt;li class="col-xs-2" data-content="Button 3">
            &lt;a href="#" class="shortcut-grid">
                &lt;i class="fa fa-video-camera">&lt;/i>
            &lt;/a>
        &lt;/li>

        &lt;!-- Shortcut buttton-->
        &lt;!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        &lt;li class="col-xs-2" data-content="Button 4">
            &lt;a href="#" class="shortcut-grid">
                &lt;i class="fa fa-heart">&lt;/i>
            &lt;/a>
        &lt;/li>

        &lt;!-- Shortcut buttton-->
        &lt;!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        &lt;li class="col-xs-2" data-content="Button 5">
            &lt;a href="#" class="shortcut-grid">
                &lt;i class="fa fa-user">&lt;/i>
            &lt;/a>
        &lt;/li>

        &lt;!-- Shortcut buttton-->
        &lt;!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        &lt;li class="col-xs-2" data-content="Button 6">
            &lt;a href="#" class="shortcut-grid">
                &lt;i class="fa fa-lock">&lt;/i>
            &lt;/a>
        &lt;/li>
    &lt;/ul>
&lt;/div></pre>
                            </div>



                            <!--WIDGETS-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h3 id="nav-widget" class="docs-spy">Widgets</h3>
                                <hr>
                                <p>You can put a small widget to the navigation.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;div class="mainnav-widget">
    &lt;div class="show-small">
        &lt;!-- Show the button/icon on the collapsed navigation -->
    &lt;/div>

    &lt;div class="hide-small mainnav-widget-content">
        &lt;!-- Widget content here -->
    &lt;/div>
&lt;/div></pre>
                            </div>




                            <!--ASIDE-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="docs-aside-visibility" class="docs-spy">Aside</h1>
                                <hr>
                                <h3>General Methods</h3>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>JavaScript</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><pre class="prettyprint pre-trans">$.niftyAside('bind');</pre></td>
                                            <td>Bind or re-bind the aside</td>
                                        </tr>
                                        <tr>
                                            <td><pre class="prettyprint pre-trans">$.niftyAside('refresh');</pre></td>
                                            <td>Refresh the aside</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="docs-section">
                                <h3>Visibility</h3>
                                <p>The visibility function let you show or hide the aside.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="aside-in">
    ...
    ...
    &lt;/div>
&lt;/body></pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Button</h4>
                                <p>You can create a toggle button in your application by adding <code>.aside-toggle</code> as an class to the button without using any JavaScript.</p>
                                <pre class="prettyprint">&lt;a href="#" class="btn aside-toggle">Toggle Aside&lt;/a>

&lt;!-- OR -->

&lt;button class="btn aside-toggle">Toggle Aside&lt;/button>
</pre>
                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch between show/hide the Aside via JavaScript</p>
                                <pre class="prettyprint">
$.niftyAside('show');

$.niftyAside('hide');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the Aside via JavaScript. It will toggle between two states: <code>hide</code> and <code>show</code>.</p>
                                <pre class="prettyprint">$.niftyAside('toggleHideShow');</pre>


                                <!--ALIGNED-->
                                <!--=================================================================================-->
                                <hr class="new-section-lg bord-no">
                                <h3 id="docs-aside-aligned" class="docs-spy">Aligned</h3>
                                <hr>
                                <p>Add class <code>.aside-left</code> to <code>#container</code> to show the aside on the left side.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="aside-left">
    ...
    ...
    &lt;/div>
&lt;/body></pre>


                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch the Aside aligned via JavaScript</p>
                                <pre class="prettyprint">
$.niftyAside('alignLeft');

$.niftyAside('alignRight');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the aligned of Aside via JavaScript. It will toggle between : <code>left</code> and <code>right</code>.</p>
                                <pre class="prettyprint">$.niftyAside('toggleAlign');</pre>


                                <!--FIXED POSITION-->
                                <!--=================================================================================-->
                                <hr class="new-section-lg bord-no">
                                <h3 id="docs-aside-fixed" class="docs-spy">Fixed Position</h3>
                                <hr>
                                <p>Add class <code>.aside-fixed</code> to <code>#container</code> for fixed position at top of page by default.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="aside-fixed">
    ...
    ...
    &lt;/div>
&lt;/body>
</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch the aside position state via JavaScript</p>
                                <pre class="prettyprint">
$.niftyAside('fixedPosition');

$.niftyAside('staticPosition');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the aligned of Aside via JavaScript. It will toggle between : <code>static</code> and <code>fixed</code>.</p>
                                <pre class="prettyprint">$.niftyAside('togglePosition');</pre>




                                <!--FIXED POSITION-->
                                <!--=================================================================================-->
                                <hr class="new-section-lg bord-no">
                                <h3 id="docs-aside-themes" class="docs-spy">Color Theme</h3>
                                <hr>
                                <p>Add class <code>.aside-bright</code> to <code>#container</code> to use the bright theme.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="aside-bright">
    ...
    ...
    &lt;/div>
&lt;/body></pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Via JavaScript</h4>
                                <p>Switch the aside color themes via JavaScript</p>
                                <pre class="prettyprint">
$.niftyAside('brightTheme');

$.niftyAside('darkTheme');</pre>

                                <hr class="new-section-sm bord-no">
                                <h4>Toggle Method</h4>
                                <p>Toggle the color of Aside via JavaScript.</p>
                                <pre class="prettyprint">$.niftyAside('toggleTheme');</pre>
                            </div>



                            <!--FOOTER-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="docs-footer" class="docs-spy">Footer</h1>
                                <hr>
                                <p>There are 2 options <code>static</code> and <code>fixed</code>. The default is static position.
                                Add the class name <code>.footer-fixed</code><br> to <code>#container</code> to make it fixed at the top of page.</p>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;body>
    &lt;div id="container" class="footer-fixed">
    ...
    ...
    &lt;/div>
&lt;/body></pre>
                            </div>



                            <!--BUTTONS-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="docs-ui-btn" class="docs-spy">UI Elements</h1>
                                <hr>

                                <h2>General</h2>
                                <div class="alert alert-info media fade in">
                                    <p class="alert-message">Please have a look at the <a class="alert-link" target="_blank" href="http://getbootstrap.com/css/#buttons">Bootstrap 3 documentation section "Buttons"</a>.</p>
                                </div>

                                <hr class="new-section-md bord-no">
                                <h2>Extended Buttons</h2>
                                <h3>Colored</h3>
                                <hr>
                                <div class="pad-ver">
                                    <button class="btn btn-mint">Mint</button>
                                    <button class="btn btn-pink">Pink</button>
                                    <button class="btn btn-purple">Purple</button>
                                    <button class="btn btn-dark">Dark</button>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;button class="btn btn-mint">Mint&lt;/button>

&lt;button class="btn btn-pink">Pink&lt;/button>

&lt;button class="btn btn-purple">Purple&lt;/button>

&lt;button class="btn btn-dark">Dark&lt;/button>
</pre>


                                <hr class="new-section-md bord-no">
                                <h3>Rounded</h3>
                                <hr>
                                <div class="pad-ver">
                                    <button class="btn btn-mint btn-rounded">Mint</button>
                                    <button class="btn btn-pink btn-rounded">Pink</button>
                                    <button class="btn btn-purple btn-rounded">Purple</button>
                                    <button class="btn btn-dark btn-rounded">Dark</button>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;button class="btn btn-mint btn-rounded">Mint&lt;/button>

&lt;button class="btn btn-pink btn-rounded">Pink&lt;/button>

&lt;button class="btn btn-purple btn-rounded">Purple&lt;/button>

&lt;button class="btn btn-dark btn-rounded">Dark&lt;/button></pre>





                                <hr class="new-section-md bord-no">
                                <h3>Labeled</h3>
                                <hr>
                                <div class="pad-ver">
                                    <button class="btn btn-primary btn-labeled icon-lg fa fa-shopping-cart">Primary</button>
                                    <button class="btn btn-danger btn-labeled btn-rounded icon-lg fa fa-times">Danger</button>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;button class="btn btn-primary btn-labeled icon-lg fa fa-shopping-cart">Primary&lt;/button>

&lt;button class="btn btn-danger btn-labeled btn-rounded icon-lg fa fa-times">Danger&lt;/button>
</pre>





                                <hr class="new-section-md bord-no">
                                <h3>Icon buttons</h3>
                                <hr>
                                <div class="pad-ver">
                                    <button class="btn btn-success btn-icon icon-lg fa fa-star"></button>
                                    <button class="btn btn-primary btn-icon btn-circle icon-lg fa fa-shopping-cart"></button>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;button class="btn btn-success btn-icon icon-lg fa fa-star">&lt;/button>

&lt;button class="btn btn-primary btn-icon btn-circle icon-lg fa fa-shopping-cart">&lt;/button></pre>






                                <hr class="new-section-md bord-no">
                                <h3>Hover buttons</h3>
                                <hr>
                                <div class="pad-ver">
                                    <button class="btn btn-default btn-hover-purple">Purple</button>
                                    <button class="btn btn-default btn-hover-info btn-rounded">Info</button>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;button class="btn btn-default btn-hover-purple">Purple&lt;/button>

&lt;button class="btn btn-default btn-hover-info btn-rounded">Info&lt;/button></pre>



                                <hr class="new-section-md bord-no">
                                <h4>Pressed / Active Buttons</h4>
                                <hr>
                                <div class="pad-ver">
                                    <button class="btn btn-default btn-active-success">Success</button>
                                    <button class="btn btn-default btn-active-pink btn-rounded">Pink</button>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;button class="btn btn-default btn-active-success">Success&lt;/button>

&lt;button class="btn btn-default btn-active-pink btn-rounded">Pink&lt;/button></pre>
                            </div>





                            <!--NIFTY SCROLL TO TOP-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h1 id="docs-scroll-top" class="docs-spy">Exclusive Plugin</h1>
                                <h3>Nifty Scroll to top</h3>
                                <hr>
                                <p>Adds a "scroll to top" button to the bottom corner of the page if the page has been scrolled down. It allows users to smoothly scroll back to the top of the page.</p>
                                <p>Just create a new button with class <code>.scroll-top</code></p>
                                <div class="pad-ver">
                                    <button class="scroll-top btn in" style="position: static">
                                        <i class="pci-chevron chevron-up"></i>
                                    </button>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;button class="scroll-top btn">
    &lt;i class="fa fa-chevron-up">&lt;/i>
&lt;/button>

&lt;!-- OR -->
&lt;!--Use our PURE CSS Icon-->

&lt;button class="scroll-top btn">
    &lt;i class="pci-chevron chevron-up">&lt;/i>
&lt;/button>
</pre>
                            </div>



                            <!--PANEL REMOVAL-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h3 id="docs-panel-removal" class="docs-spy">Nifty Panel Removal</h3>
                                <hr>
                                <p>This is the plugin to remove panel by clicking on the close button. <br> Add <code>data-dismiss="panel"</code> to your close button to automatically give a panel close functionality.</p>
                                <div class="row pad-ver">
                                    <div class="col-md-4">
                                        <div class="panel panel-dark panel-colorful">
                                            <!-- Panel heading -->
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                            <div class="panel-heading">
                                                <div class="panel-control">
                                                    <button data-dismiss="panel" class="btn btn-default">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </div>
                                                <h3 class="panel-title">Panel Title</h3>
                                            </div>

                                            <!-- Panel body -->
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                            <div class="panel-body">
                                                <h4 class="text-light">Panel body</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="panel panel-primary panel-bordered">
                                            <!-- Panel heading -->
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                            <div class="panel-heading">
                                                <div class="panel-control">
                                                    <button data-dismiss="panel" class="btn btn-default">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </div>
                                                <h3 class="panel-title">Panel Title</h3>
                                            </div>

                                            <!-- Panel body -->
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                            <div class="panel-body">
                                                <h4>Panel body</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="panel panel-purple panel-colorful">
                                            <!-- Panel heading -->
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                            <div class="panel-heading">
                                                <div class="panel-control">
                                                    <button data-dismiss="panel" class="btn btn-default">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </div>
                                                <h3 class="panel-title">Panel Title</h3>
                                            </div>

                                            <!-- Panel body -->
                                            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                            <div class="panel-body">
                                                <h4 class="text-light">Panel body</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;div class="panel">
    &lt;!-- Panel Heading -->
    &lt;div class="panel-heading">
        &lt;div class="panel-control">
            &lt;!-- Close Button -->
            &lt;button class="btn btn-default" <strong>data-dismiss="panel"</strong>>
                &lt;i class="fa fa-times">&lt;/i>
            &lt;/button>
        &lt;/div>
        &lt;h3 class="panel-title">Panel Title&lt;/h3>
    &lt;/div>


    &lt;!-- Panel body -->
    &lt;div class="panel-body">
        &lt;!-- Content here -->
    &lt;/div>
&lt;/div>
</pre>
                            </div>



                            <!--NIFTY OVERLAY-->
                            <!--=================================================================================-->
                            <div id="demo-sec-overlay" class="docs-section">
                                <h3 id="docs-overlay" class="docs-spy">Nifty Overlay</h3>
                                <hr>
                                <p>Create a button with <code>data-target="#yourTargetID"</code> and initialize the button via javascript.</p>
                                <br>
                                <h4 class="pad-btm">Live Example 1</h4>
                                <div id="demo-panel-overlay" class="panel">

                                    <!-- Panel heading -->
                                    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Show in this panel</h3>
                                    </div>

                                    <!-- Panel body -->
                                    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                    <div class="collapse in">
                                        <div class="panel-body">
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>

                                            <button id="demo-panel-overlay-btn" data-target="#demo-panel-overlay" class="demo-overlay-btn btn btn-success">
                                                <i class="fa fa-refresh fa-lg fa-fw"></i> Show Here
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <hr class="new-section-md bord-no">
                                <h4 class="pad-btm">Live Example 2</h4>

                                <button data-target="#demo-sec-overlay" class="demo-overlay-btn btn btn-lg btn-warning" autocomplete="off">
                                    Show in this section
                                </button>

                                <hr class="new-section-sm bord-no">
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;button id="myButton" data-target="#targetID" class="btn" autocomplete="off">
    Button Title
&lt;/button></pre>
                                <br>
                                <h5 class="text-bold">JavaScript</h5>
                                <pre class="prettyprint">
$('#myButton').niftyOverlay().on('click', function(){
    $(this).niftyOverlay('show');

    //Do something....

    if("success"){
        $(this).niftyOverlay('hide');
    }
});</pre>
                            </div>
                            <div class="docs-section">
                                <h4>With Custom Title and description</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div id="demo-overlay-title" class="panel pad-all">
                                            <h4>Content Title</h4>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                                            <div class="mar-top">
                                                <button id="demo-overlay-btn-2" data-target="#demo-overlay-title" class="btn btn-mint btn-labeled fa fa-refresh" autocomplete="off">
                                                    Refresh
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div id="demo-overlay-desc" class="panel pad-all">
                                            <h4>Content Title</h4>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                                            <div class="mar-top">
                                                <button id="demo-overlay-btn-3" data-target="#demo-overlay-desc" class="btn btn-pink btn-labeled fa fa-refresh" autocomplete="off">
                                                    Refresh
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr class="new-section-xs bord-no">
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myButton').niftyOverlay({
    title: 'Loading...'
});


$('#myButton').niftyOverlay({
    title: 'Loading...',
    desc: 'Please wait while the content is load.'
});</pre>

                            </div>


                            <div class="docs-section">
                                <h4>Coloring the Icon</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div id="demo-overlay-ico-color" class="panel pad-all">
                                            <h4>Content Title</h4>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                                            <div class="mar-top">
                                                <button id="demo-overlay-btn-4" data-target="#demo-overlay-ico-color" class="btn btn-mint btn-labeled fa fa-refresh" autocomplete="off">
                                                    Refresh
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div id="demo-overlay-ico-color-2" class="panel pad-all">
                                            <h4>Content Title</h4>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                                            <div class="mar-top">
                                                <button id="demo-overlay-btn-5" data-target="#demo-overlay-ico-color-2" class="btn btn-pink btn-labeled fa fa-refresh" autocomplete="off">
                                                    Refresh
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr class="new-section-xs bord-no">
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myButton').niftyOverlay({
    iconColor: 'text-danger'
});


$('#myButton').niftyOverlay({
    iconColor: 'text-purple'
});</pre>

                            </div>



                            <div class="docs-section">
                                <h4>Custom Icon &amp; Animation</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div id="demo-overlay-ico-class" class="panel pad-all">
                                            <h4>Content Title</h4>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                                            <div class="mar-top">
                                                <button id="demo-overlay-btn-6" data-target="#demo-overlay-ico-class" class="btn btn-mint btn-labeled fa fa-refresh" autocomplete="off">
                                                    Refresh
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div id="demo-overlay-ico-class-2" class="panel pad-all">
                                            <h4>Content Title</h4>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                                            <div class="mar-top">
                                                <button id="demo-overlay-btn-7" data-target="#demo-overlay-ico-class-2" class="btn btn-pink btn-labeled fa fa-refresh" autocomplete="off">
                                                    Refresh
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr class="new-section-xs bord-no">
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myButton').niftyOverlay({
    iconClass: 'fa fa-paint-brush fa-3x animated infinite wobble'
});


$('#myButton').niftyOverlay({
    iconClass: 'fa fa-heart fa-3x animated infinite rubberBand'
});</pre>

                            </div>



                            <!--NIFTY NOTY-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h3 id="docs-noty" class="docs-spy">Nifty Notification</h3>
                                <hr>
                                <h4>Options</h4>

                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 150px;">Name</th>
                                            <th style="width: 150px;">Type</th>
                                            <th style="width: 150px;">Default</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>type</td>
                                            <td>string</td>
                                            <td>primary</td>
                                            <td>The type of notification. Example <code>primary</code> <code>info</code> <code>success</code> <code>warning</code> <code>danger</code> <code>mint</code> <code>purple</code> <code>pink</code> <code>dark</code></td>
                                        </tr>
                                        <tr>
                                            <td>icon</td>
                                            <td>string</td>
                                            <td>null</td>
                                            <td>Icon class names</td>
                                        </tr>
                                        <tr>
                                            <td>title</td>
                                            <td>string</td>
                                            <td>null</td>
                                            <td>The title of notification</td>
                                        </tr>
                                        <tr>
                                            <td>message</td>
                                            <td>string</td>
                                            <td>null</td>
                                            <td>The message of notification</td>
                                        </tr>
                                        <tr>
                                            <td>closeBtn</td>
                                            <td>boolean</td>
                                            <td>true</td>
                                            <td>Show or hide the close button.</td>
                                        </tr>
                                        <tr>
                                            <td>container</td>
                                            <td>string</td>
                                            <td>page</td>
                                            <td>This option is particularly useful in that it allows you to position the notification. <br> Example : <code>page</code> <code>floating</code> <code>"specified target name"</code></td>
                                        </tr>
                                        <tr>
                                            <td>floating: { <br><span class="pad-lft">position</span><br> } </td>
                                            <td>string</td>
                                            <td>top-right</td>
                                            <td>Floating position.<br> Currently only supports "top-right". We will make further development for the next version.</td>
                                        </tr>
                                        <tr>
                                            <td>floating: { <br> <span class="pad-lft">animationIn</span> <br> } </td>
                                            <td>string</td>
                                            <td>bounceInDown</td>
                                            <td>Apply a CSS animation to the notification</td>
                                        </tr>
                                        <tr>
                                            <td>floating: { <br> <span class="pad-lft">animationOut</span> <br> } </td>
                                            <td>string</td>
                                            <td>bounceOutUp</td>
                                            <td>Apply a CSS animation to the notification</td>
                                        </tr>
                                        <tr>
                                            <td>html</td>
                                            <td>string</td>
                                            <td>null</td>
                                            <td>Insert HTML into the notification.  If false, jQuery's text method will be used to insert content into the DOM.</td>
                                        </tr>
                                        <tr>
                                            <td>focus</td>
                                            <td>boolean</td>
                                            <td>true</td>
                                            <td>Scroll to the notification.</td>
                                        </tr>
                                        <tr>
                                            <td>timer</td>
                                            <td>Number</td>
                                            <td>0</td>
                                            <td>To enable the "auto close" notofication, please specify the time to show the notification before it closed.<br>Value is in milliseconds. (0 to disable the autoclose.)</td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>


                            <div class="docs-section">
                                <h3>Floating</h3>
                                <p>The notifications will appear as floating messages at the top of your screen.</p>
                                <div class="pad-ver">
                                    <button id="demo-noty-floating" class="btn btn-primary">Floating Alert</button>
                                </div>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$.niftyNoty({
    type: "success",
    container : "floating",
    title : "You have've got 30 Messages",
    message : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
    closeBtn : false,
    timer : 5000
});</pre>

                            </div>


                            <div class="docs-section">
                                <h3>Page Alert</h3>
                                <p>The notifications will appear at the top of your page.</p>
                                <div class="pad-ver">
                                    <button id="demo-noty-page" class="btn btn-danger">Page Alert</button>
                                </div>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$.niftyNoty({
    type: 'danger',
    icon : 'fa fa-bolt fa-2x',
    container : 'page',
    title : 'Server Load Limited',
    message : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
});</pre>

                            </div>



                            <div class="docs-section">
                                <h3>Penel Alert</h3>
                                <p>The notifications will appear at the top of your selected panels.</p>
                                <div class="pad-ver">
                                    <div id="demo-panel-alert" class="panel">

                                        <!-- Panel heading -->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Panel Title</h3>
                                        </div>

                                        <!-- Panel body -->
                                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                                        <div class="collapse in">
                                            <div class="panel-body">
                                                <h4>Panel body</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <button id="demo-noty-panel" class="btn btn-primary">Add an Alert</button>
                                </div>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$.niftyNoty({
    type: 'info',
    container : '#targetID',
    html : '&lt;h4 class="alert-title">Oh snap! You got an error!&lt;/h4>&lt;p class="alert-message">Change this and that and try again. Duis mollis, est non commodo luctus.&lt;/p>&lt;div class="mar-top">&lt;button type="button" class="btn btn-info" data-dismiss="noty">Close this notification&lt;/button>&lt;/div>',
    closeBtn : false
});</pre>

                            </div>


                            <div class="docs-section">
                                <h3>Events</h3>
                                <hr>
                                <p>Nifty's Notification class exposes a few events for hooking into alert functionality.</p>
                                <table class="table table-bordered table-striped pad-ver">
                                    <thead>
                                        <tr>
                                            <th style="width: 250px;">Event Type</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>onShow</td>
                                            <td>This event fires immediately when the show instance method is called.</td>
                                        </tr>
                                        <tr>
                                            <td>onShown</td>
                                            <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
                                        </tr>
                                        <tr>
                                            <td>onHide</td>
                                            <td>This event is fired immediately when the hide instance method has been called.</td>
                                        </tr>
                                        <tr>
                                            <td>onHidden</td>
                                            <td>This event is fired when the notification has finished being hidden from the user (will wait for CSS transitions to complete).</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <br>
                                <h4>Live example</h4>
                                <div class="pad-ver">
                                    <button id="demo-noty-onshow" class="btn btn-purple">onShow</button>
                                    <button id="demo-noty-onshown" class="btn btn-danger">onShown</button>
                                    <button id="demo-noty-onhide" class="btn btn-warning">onHide</button>
                                    <button id="demo-noty-onhidden" class="btn btn-info">onHidden</button>
                                </div>

                                <hr>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
// onShow
$.niftyNoty({
    type: 'purple',
    container : 'floating',
    title : 'onShow Callback',
    message : 'This event fires immediately when the show instance method is called.',
    closeBtn : false,
    timer : 2000,
    onShow:function(){
        alert("onShow Callback");
    }
});



// onShown
$.niftyNoty({
    type: 'danger',
    container : 'floating',
    title : 'onShown Callback',
    message : 'This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).',
    closeBtn : false,
    timer : 2000,
    onShown:function(){
        alert("onShown Callback");
    }
});



// onHide
$.niftyNoty({
    type: 'warning',
    container : 'floating',
    title : 'onHide Callback',
    message : 'This event is fired immediately when the hide instance method has been called.',
    closeBtn : false,
    timer : 2000,
    onHide:function(){
        alert("onHide Callback");
    }
});



// onHidden
$.niftyNoty({
    type: 'info',
    container : 'floating',
    title : 'onHidden Callback',
    message : 'This event is fired when the notification has finished being hidden from the user (will wait for CSS transitions to complete).',
    closeBtn : false,
    timer : 2000,
    onHidden:function(){
        alert("onHidden Callback");
    }
});</pre>
                            </div>




                            <!--NIFTY CHECKBOXES-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h2 id="docs-check" class="docs-spy">Nifty Check</h2>
                                <hr>
                                <p>Highly customizable checkboxes and radio buttons</p>
                                <hr class="new-section-md bord-no">
                                <h3>Checkboxes</h3>
                                <hr>
                                <h4>Default</h4>
                                <hr class="mar-no pad-btm">
                                <p>Use CSS to customize checkboxes </p>
                                <div class="pad-ver">
                                    <label class="form-checkbox form-normal active">
                                        <input type="checkbox" checked> Option 1 (pre-checked)
                                    </label>
                                    <label class="form-checkbox form-normal">
                                        <input type="checkbox"> Option 2
                                    </label>
                                    <label class="form-checkbox form-normal">
                                        <input type="checkbox"> Option 3
                                    </label>
                                </div>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;label class="form-checkbox form-normal active">
    &lt;input type="checkbox" checked> Option 1 (pre-checked)
&lt;/label>

&lt;label class="form-checkbox form-normal">
    &lt;input type="checkbox"> Option 2
&lt;/label>

&lt;label class="form-checkbox form-normal">
    &lt;input type="checkbox"> Option 3
&lt;/label></pre>

                                <hr class="new-section-md bord-no">
                                <h4>Using Font Awesome</h4>
                                <hr class="mar-no pad-btm">
                                <p>Use FontAwesome to custom input elements as checkboxes.</p>
                                <br>
                                <div class="pad-ver">
                                    <label class="form-checkbox form-icon active">
                                        <input type="checkbox" checked> Option 1 (pre-checked)
                                    </label>
                                    <label class="form-checkbox form-icon">
                                        <input type="checkbox"> Option 2
                                    </label>
                                    <label class="form-checkbox form-icon">
                                        <input type="checkbox"> Option 3
                                    </label>
                                </div>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;label class="form-checkbox form-icon active">
    &lt;input type="checkbox" checked> Option 1 (pre-checked)
&lt;/label>

&lt;label class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 2
&lt;/label>

&lt;label class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 3
&lt;/label></pre>


                                <hr class="new-section-md bord-no">
                                <h4>Buttons Style</h4>
                                <hr class="mar-no pad-btm">
                                <p>Display the checkboxes as buttons.</p>
                                <div class="pad-ver">
                                    <label class="form-checkbox form-icon btn btn-success">
                                        <input type="checkbox"> Single Checkbox
                                    </label>
                                </div>
                                <div class="pad-ver btn-group">
                                    <label class="form-checkbox form-icon btn btn-success">
                                        <input type="checkbox" checked> Option 1 (pre-checked)
                                    </label>
                                    <label class="form-checkbox form-icon btn btn-success">
                                        <input type="checkbox"> Option 2
                                    </label>
                                    <label class="form-checkbox form-icon btn btn-success">
                                        <input type="checkbox"> Option 3
                                    </label>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;label class="form-checkbox form-icon btn btn-success">
    &lt;input type="checkbox" checked> Option 1 (pre-checked)
&lt;/label>

&lt;label class="form-checkbox form-icon btn btn-warning">
    &lt;input type="checkbox"> Option 2
&lt;/label>

&lt;label class="form-checkbox form-icon btn btn-danger">
    &lt;input type="checkbox"> Option 3
&lt;/label></pre>


                            </div>

                            <!--NIFTY RADIO BUTTONS-->
                            <!--=================================================================================-->
                            <div class="docs-section">
                                <h3>Radio Buttons</h3>
                                <hr class="bord-no">
                                <h4>Default</h4>
                                <hr class="mar-no pad-btm">
                                <p>Use CSS to customize the radio buttons</p>
                                <div class="pad-ver">
                                    <label class="form-radio form-normal active">
                                        <input type="radio" checked name="def-w-label"> Option 1 (pre-checked)
                                    </label>

                                    <label class="form-radio form-normal">
                                        <input type="radio" name="def-w-label"> Option 2
                                    </label>

                                    <label class="form-radio form-normal">
                                        <input type="radio" name="def-w-label"> Option 3
                                    </label>
                                </div>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;label class="form-radio form-normal active">
    &lt;input type="radio" name="def-w-label" checked> Option 1 (pre-checked)
&lt;/label>

&lt;label class="form-radio form-normal">
    &lt;input type="radio" name="def-w-label"> Option 2
&lt;/label>

&lt;label class="form-radio form-normal">
    &lt;input type="radio" name="def-w-label"> Option 3
&lt;/label></pre>

                                <hr class="new-section-md bord-no">
                                <h4>Using Font Awesome</h4>
                                <hr class="mar-no pad-btm">
                                <p>Use FontAwesome to custom input elements as radio buttons.</p>
                                <br>
                                <div class="pad-ver">
                                    <label class="form-radio form-icon active">
                                        <input type="radio" checked name="ico-w-label"> Option 1 (pre-checked)
                                    </label>

                                    <label class="form-radio form-icon">
                                        <input type="radio" name="ico-w-label"> Option 2
                                    </label>

                                    <label class="form-radio form-icon">
                                        <input type="radio" name="ico-w-label"> Option 3
                                    </label>
                                </div>
                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;label class="form-radio form-icon active">
    &lt;input type="radio" name="ico-w-label" checked> Option 1 (pre-checked)
&lt;/label>

&lt;label class="form-radio form-icon">
    &lt;input type="radio" name="ico-w-label"> Option 2
&lt;/label>

&lt;label class="form-radio form-icon">
    &lt;input type="radio" name="ico-w-label"> Option 3
&lt;/label></pre>


                                <hr class="new-section-md bord-no">
                                <h4>Buttons Style</h4>
                                <hr class="mar-no pad-btm">
                                <p>Display the radiobutton as buttons.</p>
                                <div class="pad-ver">
                                    <label class="form-radio form-icon btn btn-warning active">
                                        <input type="radio" checked name="btn-w-label"> Option 1 (pre-checked)
                                    </label>

                                    <label class="form-radio form-icon btn btn-warning">
                                        <input type="radio" name="btn-w-label"> Option 2
                                    </label>

                                    <label class="form-radio form-icon btn btn-warning">
                                        <input type="radio" name="btn-w-label"> Option 3
                                    </label>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">
&lt;label class="form-radio form-icon btn btn-warning active">
    &lt;input type="radio" name="btn-w-label" checked> Option 1 (pre-checked)
&lt;/label>

&lt;label class="form-radio form-icon btn btn-warning">
    &lt;input type="radio" name="btn-w-label"> Option 2
&lt;/label>

&lt;label class="form-radio form-icon btn btn-warning">
    &lt;input type="radio" name="btn-w-label"> Option 3
&lt;/label></pre>
                            </div>


                            <hr class="new-section-md bord-no">
                            <div class="docs-section">
                                <h2>Methods</h2>
                                <h3>Get State</h3>
                                <hr>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="pad-ver">
                                            <label id="docs-check-cb-getstate" class="form-checkbox form-icon">
                                                <input type="checkbox"> Option 1
                                            </label>
                                            <p id="docs-check-cb-getstate-txt" class="pad-top"></p>
                                        </div>

                                        <button id="docs-check-cb-getstate-btn" class="btn btn-success">Get Current State</button>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="pad-ver clearfix">
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd-getstate" class="form-radio form-icon">
                                                    <input type="radio" name="ischecked"> Option 1
                                                </label>
                                                <p id="docs-check-rd-getstate-txt" class="pad-top"></p>
                                            </div>
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd-getstate2" class="form-radio form-icon">
                                                    <input type="radio" name="ischecked"> Option 2
                                                </label>
                                                <p id="docs-check-rd-getstate2-txt" class="pad-top"></p>
                                            </div>
                                        </div>

                                        <button id="docs-check-rd-getstate-btn" class="btn btn-success">Get Current State</button>
                                    </div>
                                </div>

                                <hr class="new-section-sm bord-no">
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;label id="myCheckbox" class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 1
&lt;/label>

&lt;label id="myRadio" class="form-radio form-icon">
    &lt;input type="radio" name="radioExample"> Option 1
&lt;/label></pre>

                                <br>
                                <h5 class="text-bold">JavaScript</h5>
                                <pre class="prettyprint">
$('#myCheckbox').niftyCheck('isChecked')

$('#myRadio').niftyCheck('isChecked')
</pre>
                            </div>


                            <div class="docs-section">
                                <h3>Toggle Checked State</h3>
                                <hr>

                                <div class="pad-ver">
                                    <label id="docs-check-toggle" class="form-checkbox form-icon">
                                        <input type="checkbox"> Option 1
                                    </label>

                                    <hr class="new-section-xs bord-no">
                                    <button id="docs-check-toggle-btn" class="btn btn-lg btn-primary mar-top">Toggle Checkbox State</button>
                                </div>

                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;label id="myCheckbox" class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 1
&lt;/label></pre>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myCheckBox').niftyCheck('toggle')
</pre>
                            </div>



                            <div class="docs-section">
                                <h3>Toggled to an on state</h3>
                                <hr>
                                <div class="pad-ver">
                                    <label id="docs-check-toggle-on" class="form-checkbox form-icon">
                                        <input type="checkbox"> Option 1
                                    </label>

                                    <hr class="new-section-xs bord-no">
                                    <button id="docs-check-toggle-on-btn" class="btn btn-mint btn-lg">Toggle the Checkbox On</button>
                                </div>



                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;label id="myCheckbox" class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 1
&lt;/label></pre>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myCheckBox').niftyCheck('toggleOn')
</pre>
                            </div>

                            <div class="docs-section">
                                <h3>Toggled to an off state</h3>
                                <hr>

                                <div class="pad-ver">
                                    <label id="docs-check-toggle-off" class="form-checkbox form-icon">
                                        <input type="checkbox" checked> Option 1
                                    </label>

                                    <hr class="new-section-xs bord-no">
                                    <button id="docs-check-toggle-off-btn" class="btn btn-purple btn-lg">Toggle the Checkbox Off</button>
                                </div>

                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;label id="myCheckbox" class="form-checkbox form-icon">
    &lt;input type="checkbox" checked> Option 1
&lt;/label></pre>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myCheckBox').niftyCheck('toggleOff');</pre>
                            </div>


                            <div class="docs-section">
                                <h2>Events</h2>
                                <h3>Checked</h3>
                                <hr>
                                <div class="row" style="height:100px">
                                    <div class="col-xs-6">
                                        <div class="pad-ver">
                                            <label id="docs-check-cb-oncheck" class="form-checkbox form-icon">
                                                <input type="checkbox"> Option 1
                                            </label>
                                            <p id="docs-check-cb-oncheck-txt" class="pad-top text-semibold text-main"></p>
                                        </div>


                                    </div>
                                    <div class="col-xs-6">
                                        <div class="pad-ver clearfix">
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd-oncheck" class="form-radio form-icon">
                                                    <input type="radio" name="oncheck"> Option 1
                                                </label>
                                                <p id="docs-check-rd-oncheck-txt" class="pad-top text-semibold text-main"></p>
                                            </div>
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd2-oncheck" class="form-radio form-icon">
                                                    <input type="radio" name="oncheck"> Option 2
                                                </label>
                                                <p id="docs-check-rd2-oncheck-txt" class="pad-top text-semibold text-main"></p>
                                            </div>
                                        </div>

                                    </div>
                                </div>


                                <br>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;label id="myCheckbox" class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 1
&lt;/label>

&lt;label id="myRadio" class="form-radio form-icon">
    &lt;input type="radio" name="radioExample"> Option 1
&lt;/label></pre>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myCheckbox').on('nifty.ch.checked', function(){
    // do something...
});


$('#myRadio').on('nifty.ch.checked', function(){
    // do something...
});</pre>
                            </div>

                            <div class="docs-section">
                                <h3>Unchecked</h3>
                                <hr>
                                <div class="row" style="height:100px">
                                    <div class="col-xs-6">
                                        <div class="pad-ver">
                                            <label id="docs-check-cb-onuncheck" class="form-checkbox form-icon">
                                                <input type="checkbox"> Option 1
                                            </label>
                                            <p id="docs-check-cb-onuncheck-txt" class="pad-top text-semibold text-main"></p>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="pad-ver clearfix">
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd-onuncheck" class="form-radio form-icon active">
                                                    <input type="radio" name="onuncheck" checked> Option 1
                                                </label>
                                                <p id="docs-check-rd-onuncheck-txt" class="pad-top text-semibold text-main"></p>
                                            </div>
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd2-onuncheck" class="form-radio form-icon">
                                                    <input type="radio" name="onuncheck"> Option 2
                                                </label>
                                                <p id="docs-check-rd2-onuncheck-txt" class="pad-top text-semibold text-main"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;label id="myCheckbox" class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 1
&lt;/label>

&lt;label id="myRadio" class="form-radio form-icon">
    &lt;input type="radio" name="radioExample"> Option 1
&lt;/label></pre>
                            <br>
                            <h5 class="text-bold">Javascript</h5>
                            <pre class="prettyprint">
$('#myCheckbox').on('nifty.ch.unchecked', function(){
    // do something...
});


$('#myRadio').on('nifty.ch.unchecked', function(){
    // do something...
});</pre>
                            </div>





                            <div class="docs-section">
                                <h3>Changed</h3>
                                <hr>
                                <div class="row" style="height:100px">
                                    <div class="col-xs-6">
                                        <div class="pad-ver">
                                            <label id="docs-check-cb-change" class="form-checkbox form-icon">
                                                <input type="checkbox"> Option 1
                                            </label>
                                            <p id="docs-check-cb-change-txt" class="pad-top"></p>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="pad-ver clearfix">
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd-change" class="form-radio form-icon active">
                                                    <input type="radio" name="change" checked> Option 1
                                                </label>
                                                <p id="docs-check-rd-change-txt" class="pad-top"></p>
                                            </div>
                                            <div class="col-xs-6">
                                                <label id="docs-check-rd2-change" class="form-radio form-icon">
                                                    <input type="radio" name="change"> Option 2
                                                </label>
                                                <p id="docs-check-rd2-change-txt" class="pad-top"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;label id="myCheckbox" class="form-checkbox form-icon">
    &lt;input type="checkbox"> Option 1
&lt;/label>

&lt;label id="myRadio" class="form-radio form-icon">
    &lt;input type="radio" name="radioExample"> Option 1
&lt;/label></pre>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">
$('#myCheckbox').on('change', function(){
    // do something...
});


$('#myRadio').on('change', function(){
    // do something...
});</pre>
                            </div>




                            <div class="docs-section">
                                <h1 id="docs-lang" class="docs-spy">Nifty Language Selector</h1>
                                <hr>
                                <h3>Live Example</h3>
                                <div class="pad-ver">
                                    <div class="dropdown">

                                        <!--SELECTED-->
                                        <!--===================================================-->
                                        <a id="demo-lang-switch" class="lang-selector dropdown-toggle btn btn-default" href="#" data-toggle="dropdown">
                                            <span class="lang-selected">
                                                <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                <span class="lang-id">EN</span>
                                                <span class="lang-name">English</span>
                                            </span>
                                        </a>

                                        <ul class="dropdown-menu">

                                            <!--ENGLISH-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#" class="active">
                                                    <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                    <span class="lang-id">EN</span><span class="lang-name">English</span>
                                                </a>
                                            </li>

                                            <!--FRANCE-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/france.png" alt="English">
                                                    <span class="lang-id">FR</span>
                                                    <span class="lang-name">Fran&ccedil;ais</span>
                                                </a>
                                            </li>

                                            <!--GERMANY-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/germany.png" alt="English">
                                                    <span class="lang-id">DE</span>
                                                    <span class="lang-name">Deutsch</span>
                                                </a>
                                            </li>

                                            <!--ITALY-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/italy.png" alt="English">
                                                    <span class="lang-id">IT</span>
                                                    <span class="lang-name">Italiano</span>
                                                </a>
                                            </li>

                                            <!--SPAIN-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/spain.png" alt="English">
                                                    <span class="lang-id">ES</span>
                                                    <span class="lang-name">Espa&ntilde;ol</span>
                                                </a>
                                            </li>
                                            <!--===================================================-->

                                        </ul>
                                    </div>
                                </div>

                                <br>

                                <h5 class="text-bold">HTML</h5>

                                <pre class="prettyprint">&lt;div class="dropdown">
    &lt;!--Selected Language-->
    &lt;a id="myLanguageSelector" class="lang-selector dropdown-toggle btn btn-default" href="#" data-toggle="dropdown">
        &lt;span class="lang-selected">
            &lt;img class="lang-flag" src="...path to img..." alt="English">
            &lt;span class="lang-id">EN&lt;/span>
            &lt;span class="lang-name">English&lt;/span>
        &lt;/span>
    &lt;/a>

    &lt;!--Language Dropdown-->
    &lt;ul class="dropdown-menu">
        &lt;li>
            &lt;a href="#" class="active">
                &lt;img class="lang-flag" src="...path to img..." alt="English">
                &lt;span class="lang-id">EN&lt;/span>
                &lt;span class="lang-name">English&lt;/span>
            &lt;/a>
        &lt;/li>
        &lt;li>
            &lt;a href="#">
                &lt;img class="lang-flag" src="...path to img..." alt="Fran&ccedil;ais">
                &lt;span class="lang-id">FR&lt;/span>
                &lt;span class="lang-name">Fran&ccedil;ais&lt;/span>
            &lt;/a>
        &lt;/li>
        ...
        ...
    &lt;/ul>
&lt;/div></pre>

                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">$('#myLanguageSelector').niftyLanguage();</pre><br>

                                <hr class="new-section-md bord-no">
                                <h3>Options</h3>
                                <hr>
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width: 150px;">Name</th>
                                            <th>Type</th>
                                            <th>Default</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>dynamicMode</td>
                                            <td>boolean</td>
                                            <td>true</td>
                                            <td>By giving value <code>false</code> mean, when you click on one of the languages it will automatically go to a specific url. <br>Make sure you enter correct url in the anchor.  <code>&lt;a href="somePage.html">&lt;/a></code></td>
                                        </tr>
                                        <tr>
                                            <td>selectedOn</td>
                                            <td>string </td>
                                            <td>null</td>
                                            <td>Automatically select one of the languages when first initializing the elements.</td>
                                        </tr>
                                        <tr>
                                            <td>onChange</td>
                                            <td>string || function</td>
                                            <td>null</td>
                                            <td>This event is fired when the language has been changed.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="docs-section">
                                <h3>Navigate to Language URL</h3>
                                <hr>
                                <div class="pad-ver">
                                    <div class="dropdown">

                                        <!--SELECTED-->
                                        <!--===================================================-->
                                        <a id="docs-lang-dynamic" class="lang-selector dropdown-toggle btn btn-default btn-lg" href="#" data-toggle="dropdown">
                                            <span class="lang-selected">
                                                <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                <span class="lang-id">EN</span>
                                                <span class="lang-name">English</span>
                                            </span>
                                        </a>

                                        <ul class="dropdown-menu">

                                            <!--ENGLISH-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="language.html" class="active">
                                                    <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                    <span class="lang-id">EN</span>
                                                    <span class="lang-name">English</span>
                                                </a>
                                            </li>

                                            <!--FRANCE-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="language.html">
                                                    <img class="lang-flag" src="../demo/img/flags/france.png" alt="Fran&ccedil;ais">
                                                    <span class="lang-id">FR</span>
                                                    <span class="lang-name">Fran&ccedil;ais</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <h5 class="text-bold">HTML</h5>
                                <pre class="prettyprint">&lt;div class="dropdown">
    &lt;!--Selected Language-->
    ...

    &lt;!--Language Dropdown-->
        &lt;li>
            <strong>&lt;a href="Go-to-language-page.html" class="active"></strong>
                &lt;img class="lang-flag" src="...path to img..." alt="English">
                &lt;span class="lang-id">EN&lt;/span>
                &lt;span class="lang-name">English&lt;/span>
            &lt;/a>
        &lt;/li>
        &lt;li>
            <strong>&lt;a href="Go-to-language-page.html"></strong>
                &lt;img class="lang-flag" src="...path to img..." alt="Fran&ccedil;ais">
                &lt;span class="lang-id">FR&lt;/span>
                &lt;span class="lang-name">Fran&ccedil;ais&lt;/span>
            &lt;/a>
        &lt;/li>
        ...
        ...
    &lt;/ul>
&lt;/div></pre>

                                <br>
                                <h5 class="text-bold">Javascript</h5>

                                <pre class="prettyprint">$('#myLanguageSelector').niftyLanguage({
    dynamicMode : false
});</pre>

                            </div>



                            <div class="docs-section">
                                <h3>Selection using JavaScript</h3>
                                <hr>
                                <div class="pad-btm">
                                    <div class="dropdown">

                                        <!--SELECTED-->
                                        <!--===================================================-->
                                        <a id="docs-lang-autosel" class="lang-selector dropdown-toggle btn btn-default btn-lg" href="#" data-toggle="dropdown">
                                            <span class="lang-selected">

                                            </span>
                                        </a>

                                        <ul class="dropdown-menu">

                                            <!--ENGLISH-->
                                            <!--===================================================-->
                                            <li>
                                                <a id="lang-en" href="#" class="active">
                                                    <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                    <span class="lang-id">EN</span>
                                                    <span class="lang-name">English</span>
                                                </a>
                                            </li>

                                            <!--FRANCE-->
                                            <!--===================================================-->
                                            <li>
                                                <a id="lang-fr" href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/france.png" alt="Fran&ccedil;ais">
                                                    <span class="lang-id">FR</span>
                                                    <span class="lang-name">Fran&ccedil;ais</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <br>

                                <h5 class="text-bold">HTML</h5>

                                <pre class="prettyprint">&lt;div class="dropdown">
    &lt;!--Selected Language-->
    &lt;a id="myLanguageSelector" class="lang-selector dropdown-toggle" href="#" data-toggle="dropdown">
        &lt;span class="lang-selected">
            // Leave it blank.
        &lt;/span>
    &lt;/a>

    &lt;!--Language Dropdown-->
    &lt;ul class="dropdown-menu">
        ...
        ...
    &lt;/ul>
&lt;/div>
</pre>

                                <br>
                                <h5 class="text-bold">Javascript</h5>

                                <pre class="prettyprint">$('#myLanguageSelector').niftyLanguage({
    selectedOn : '#lang-fr'
});</pre>

                            </div>



                            <div class="docs-section">
                                <h2>Events</h2>
                                <h3>onChange</h3>
                                <hr>
                                <h5>Example</h5>
                                <div class="pad-ver">
                                    <div class="dropdown">

                                        <!--SELECTED-->
                                        <!--===================================================-->
                                        <a id="docs-lang-onchange" class="lang-selector dropdown-toggle btn btn-lg btn-default" href="#" data-toggle="dropdown">
                                            <span class="lang-selected">
                                                <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                <span class="lang-id">EN</span>
                                                <span class="lang-name">English</span>
                                            </span>
                                        </a>

                                        <ul class="dropdown-menu">

                                            <!--ENGLISH-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#" class="active">
                                                    <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                    <span class="lang-id">EN</span>
                                                    <span class="lang-name">English</span>
                                                </a>
                                            </li>

                                            <!--FRANCE-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/france.png" alt="Fran&ccedil;ais">
                                                    <span class="lang-id">FR</span>
                                                    <span class="lang-name">Fran&ccedil;ais</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">$('#myLanguageSelector').niftyLanguage({
    onChange: function(e){
        alert('ID : ' + e.id + ' - Language : ' + e.name )
    }
});</pre>
                            </div>


                            <div class="docs-section">
                                <h2 id="method-lang">Methods</h2>
                                <h3>getSelected</h3>
                                <hr>
                                <div class="pad-ver">
                                    <div class="dropdown">

                                        <!--SELECTED-->
                                        <!--===================================================-->
                                        <a id="docs-lang-getsel" class="lang-selector dropdown-toggle btn btn-default btn-lg" href="#" data-toggle="dropdown">
                                            <span class="lang-selected">
                                                <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                <span class="lang-id">EN</span>
                                                <span class="lang-name">English</span>
                                            </span>
                                        </a>

                                        <ul class="dropdown-menu">

                                            <!--ENGLISH-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#" class="active">
                                                    <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                    <span class="lang-id">EN</span>
                                                    <span class="lang-name">English</span>
                                                </a>
                                            </li>

                                            <!--FRANCE-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/france.png" alt="Fran&ccedil;ais">
                                                    <span class="lang-id">FR</span>
                                                    <span class="lang-name">Fran&ccedil;ais</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <br>
                                <div class="row text-center">
                                    <div class="col-xs-4">
                                        <p id="doc-lang-getid-txt" class="text-lg text-semibold" style="height:2em"></p>
                                        <button id="doc-lang-getid-btn" class="btn btn-default btn-hover-success">Get selected ID</button>
                                    </div>
                                    <div class="col-xs-4">
                                        <p id="doc-lang-getname-txt" class="text-lg text-semibold" style="height:2em"></p>
                                        <button id="doc-lang-getname-btn" class="btn btn-default btn-hover-primary">Get selected Name</button>
                                    </div>
                                    <div class="col-xs-4">
                                        <p id="doc-lang-getsel-txt" class="text-lg text-semibold" style="height:2em"></p>
                                        <button id="doc-lang-getsel-btn" class="btn btn-default btn-hover-danger">Get selected</button>
                                    </div>
                                </div>
                                <br>
                                <h5 class="text-bold">Javascript</h5>
                                <pre class="prettyprint">$('#myLanguageSelector').niftyLanguage('getSelectedID');

$('#myLanguageSelector').niftyLanguage('getSelectedName');

$('#myLanguageSelector').niftyLanguage('getSelected');</pre>
                            </div>



                            <div class="docs-section">
                                <h3>Disabled</h3>
                                <hr>
                                <div class="pad-ver">
                                    <div class="dropdown">

                                        <!--SELECTED-->
                                        <!--===================================================-->
                                        <a id="docs-lang-disabled" class="lang-selector dropdown-toggle btn btn-default btn-lg" href="#" data-toggle="dropdown">
                                            <span class="lang-selected">
                                                <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                <span class="lang-id">EN</span>
                                                <span class="lang-name">English</span>
                                            </span>
                                        </a>

                                        <ul class="dropdown-menu">

                                            <!--ENGLISH-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#" class="active">
                                                    <img class="lang-flag" src="../demo/img/flags/united-kingdom.png" alt="English">
                                                    <span class="lang-id">EN</span>
                                                    <span class="lang-name">English</span>
                                                </a>
                                            </li>

                                            <!--FRANCE-->
                                            <!--===================================================-->
                                            <li>
                                                <a href="#">
                                                    <img class="lang-flag" src="../demo/img/flags/france.png" alt="Fran&ccedil;ais">
                                                    <span class="lang-id">FR</span>
                                                    <span class="lang-name">Fran&ccedil;ais</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <br>
                                    <button id="doc-lang-enable-btn" class="btn btn-lg btn-default">Enable</button>
                                    <button id="doc-lang-disable-btn" class="btn btn-lg btn-default">Disable</button>

                                </div>
                                <br>
                                <h5 class="text-bold">Javascript</h5>

                                <pre class="prettyprint">$('#myLanguageSelector').niftyLanguage('setEnable');

$('#myLanguageSelector').niftyLanguage('setDisable');</pre>

                            </div>


                            <div>
                                <h1 id="docs-3rd-plugins" class="docs-spy">Third Party Plugins &amp; Credits</h1>
                                <hr>
                                <p>We've used the following frameworks, fonts, icons, images and scripts as listed. Our thanks goes to all the authors!</p>
                                <br>
                                <h4>Frameworks</h4>
                                <table class="table table-bordered table-striped table-credit table-vcenter">
                                    <tbody>
                                        <tr>
                                            <td>Bootstrap</td>
                                            <td>v3.3.6</td>
                                            <td><a href="http://getbootstrap.com/" target="_blank" class="btn-link">http://getbootstrap.com/</a></td>
                                            <td>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</td>
                                        </tr>
                                        <tr>
                                            <td>jQuery</td>
                                            <td>v2.2.4</td>
                                            <td><a href="http://jquery.com/" target="_blank" class="btn-link">http://jquery.com/</a></td>
                                            <td>jQuery is a fast, small, and feature-rich JavaScript library.</td>
                                        </tr>
                                    </tbody>
                                </table>


                                <br>
                                <h4>Font</h4>
                                <table class="table table-bordered table-striped table-credit table-vcenter">
                                    <tbody>
                                        <tr>
                                            <td>Google Web Fonts <br>(Open Sans)</td>
                                            <td>-</td>
                                            <td><a href="http://www.google.com/fonts/specimen/Open+Sans" target="_blank" class="btn-link text-overflow">http://www.google.com/fonts/specimen/Open+Sans</a></td>
                                            <td >Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp.</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <br>
                                <h4>Icons</h4>
                                <table class="table table-bordered table-striped table-credit table-vcenter">
                                    <tbody>
                                        <tr>
                                            <td>Font Awesome</td>
                                            <td>v4.6.3</td>
                                            <td><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank" class="btn-link">http://fortawesome.github.io/Font-Awesome/</a></td>
                                            <td>Font Awesome gives you scalable vector icons that can instantly be customized with the power of CSS.</td>
                                        </tr>
                                        <tr>
                                            <td>Ion Icons</td>
                                            <td>v2.0.0</td>
                                            <td><a href="http://ionicons.com/" target="_blank" class="btn-link">http://ionicons.com/</a></td>
                                            <td>Icon packs to use in your design projects.</td>
                                        </tr>
                                        <tr>
                                            <td>Themify Icons</td>
                                            <td>v1.0.1</td>
                                            <td><a href="https://themify.me/themify-icons" target="_blank" class="btn-link">https://themify.me/themify-icons</a></td>
                                            <td>Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect.</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <br>
                                <h4>Images</h4>
                                <table class="table table-bordered table-striped table-credit table-vcenter">
                                    <tbody>
                                        <tr>
                                            <td>Unsplash</td>
                                            <td>-</td>
                                            <td><a href="https://unsplash.com/" target="_blank" class="btn-link">https://unsplash.com/</a></td>
                                            <td>High-resolution stock photos</td>
                                        </tr>
                                        <tr>
                                            <td>User Avatar (Profile Images)</td>
                                            <td>-</td>
                                            <td><a href="https://themeon.net/" target="_blank" class="btn-link">https://themeon.net/</a></td>
                                            <td>Used <strong>exclusively for Nifty</strong> by <strong>ThemeOn</strong></td>
                                        </tr>
                                    </tbody>
                                </table>


                                <br>
                                <h4>Scripts</h4>
                                <table class="table table-bordered table-striped table-credit table-vcenter">
                                    <tbody>
                                        <tr>
                                            <td>Animate.css</td>
                                            <td>v3.5.2</td>
                                            <td><a href="http://daneden.github.io/animate.css/" target="_blank" class="btn-link">http://daneden.github.io/animate.css/</a></td>
                                            <td>A cross-browser library of CSS animations. As easy to use as an easy thing.</td>
                                        </tr>
                                        <tr>
                                            <td>Bootbox</td>
                                            <td>v4.3.0</td>
                                            <td><a href="http://bootboxjs.com/" target="_blank" class="btn-link">http://bootboxjs.com/</a></td>
                                            <td>Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.</td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Datepicker</td>
                                            <td>v1.6.0</td>
                                            <td><a href="http://eternicode.github.io/bootstrap-datepicker/" target="_blank" class="btn-link">http://eternicode.github.io/bootstrap-datepicker/</a></td>
                                            <td>Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style.</td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Datepicker</td>
                                            <td>v1.6.0</td>
                                            <td><a href="http://eternicode.github.io/bootstrap-datepicker/" target="_blank" class="btn-link">http://eternicode.github.io/bootstrap-datepicker/</a></td>
                                            <td>Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style.</td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Markdown</td>
                                            <td>v2.10.0</td>
                                            <td><a href="http://www.codingdrama.com/bootstrap-markdown/" target="_blank" class="btn-link">http://www.codingdrama.com/bootstrap-markdown/</a></td>
                                            <td>A custom select for @twitter bootstrap using button dropdown.</td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Table</td>
                                            <td>v1.10.1</td>
                                            <td><a href="http://bootstrap-table.wenzhixin.net.cn/" target="_blank" class="btn-link">http://bootstrap-table.wenzhixin.net.cn/</a></td>
                                            <td>Bootstrap table displays data in a tabular format and offers rich support to radio, checkbox, sort, pagination and so on. </td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Tagsinput</td>
                                            <td>v0.8.0</td>
                                            <td><a href="http://timschlechter.github.io/bootstrap-tagsinput/examples/" target="_blank" class="btn-link">http://timschlechter.github.io/bootstrap-tagsinput/examples/</a></td>
                                            <td>jQuery plugin providing a Twitter Bootstrap user interface for managing tags</td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Timepicker</td>
                                            <td>v3.5.1</td>
                                            <td><a href="http://jdewit.github.io/bootstrap-timepicker/" target="_blank" class="btn-link">http://jdewit.github.io/bootstrap-timepicker/</a></td>
                                            <td>Easily select a time for a text input using your mouse or keyboards arrow keys.</td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Validator</td>
                                            <td>v0.5.3-dev</td>
                                            <td><a href="http://bootstrapvalidator.com/" target="_blank" class="btn-link">http://bootstrapvalidator.com/</a></td>
                                            <td>Best jQuery plugin to validate form fields Designed to use with Bootstrap 3+</td>
                                        </tr>
                                        <tr>
                                            <td>Bootstrap Wizard</td>
                                            <td>v2.3.2</td>
                                            <td><a href="http://vadimg.com/twitter-bootstrap-wizard-example/" target="_blank" class="btn-link">http://vadimg.com/twitter-bootstrap-wizard-example/</a></td>
                                            <td>This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure.</td>
                                        </tr>
                                        <tr>
                                            <td>Chosen</td>
                                            <td>v1.5.1</td>
                                            <td><a href="http://harvesthq.github.io/chosen/" target="_blank" class="btn-link">http://harvesthq.github.io/chosen/</a></td>
                                            <td>Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.</td>
                                        </tr>
                                        <tr>
                                            <td>DataTables</td>
                                            <td>v1.10.4</td>
                                            <td><a href="http://www.datatables.net/" target="_blank" class="btn-link">http://www.datatables.net/</a></td>
                                            <td>DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.</td>
                                        </tr>
                                        <tr>
                                            <td>Dropzone</td>
                                            <td>v4.3.0</td>
                                            <td><a href="http://www.dropzonejs.com/" target="_blank" class="btn-link">http://www.dropzonejs.com/</a></td>
                                            <td>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.</td>
                                        </tr>
                                        <tr>
                                            <td>Easy Pie Chart</td>
                                            <td>v2.1.6</td>
                                            <td><a href="http://rendro.github.io/easy-pie-chart/" target="_blank" class="btn-link">http://rendro.github.io/easy-pie-chart/</a></td>
                                            <td>Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values.</td>
                                        </tr>
                                        <tr>
                                            <td>Email Templates</td>
                                            <td>v1.0</td>
                                            <td><a href="https://github.com/mailgun/transactional-email-templates" target="_blank" class="btn-link">https://github.com/mailgun/transactional-email-templates</a></td>
                                            <td>Styling HTML email is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers.</td>
                                        </tr>
                                        <tr>
                                            <td>FastClick</td>
                                            <td>v2.1.6</td>
                                            <td><a href="https://github.com/ftlabs/fastclick" target="_blank" class="btn-link">https://github.com/ftlabs/fastclick</a></td>
                                            <td>FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.</td>
                                        </tr>
                                        <tr>
                                            <td>Flot Charts</td>
                                            <td>v0.8.3</td>
                                            <td><a href="http://www.flotcharts.org/" target="_blank" class="btn-link">http://www.flotcharts.org/</a></td>
                                            <td>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.</td>
                                        </tr>
                                        <tr>
                                            <td>Foo Table</td>
                                            <td>v2.0.3</td>
                                            <td><a href="http://fooplugins.com/plugins/footable-jquery/" target="_blank" class="btn-link">http://fooplugins.com/plugins/footable-jquery/</a></td>
                                            <td>FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them.</td>
                                        </tr>
                                        <tr>
                                            <td>Full Calendar</td>
                                            <td>v2.2.6</td>
                                            <td><a href="http://fullcalendar.io/" target="_blank" class="btn-link">http://fullcalendar.io/</a></td>
                                            <td>FullCalendar is a jQuery plugin that provides a full-sized, drag &amp; drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.</td>
                                        </tr>
                                        <tr>
                                            <td>Gauge.js</td>
                                            <td>v1.6.3</td>
                                            <td><a href="http://bernii.github.io/gauge.js/" target="_blank" class="btn-link">http://bernii.github.io/gauge.js/</a></td>
                                            <td>100% native and cool looking animated JavaScript/CoffeScript gauge.</td>
                                        </tr>
                                        <tr>
                                            <td>GMaps.js</td>
                                            <td>v0.4.16</td>
                                            <td><a href="http://hpneo.github.io/gmaps/" target="_blank" class="btn-link">http://hpneo.github.io/gmaps/</a></td>
                                            <td>Gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.</td>
                                        </tr>
                                        <tr>
                                            <td>jQuery resizeEnd</td>
                                            <td>v1.0.1</td>
                                            <td><a href="https://github.com/giuseppeg/jQuery-resizeEnd" target="_blank" class="btn-link">https://github.com/giuseppeg/jQuery-resizeEnd</a></td>
                                            <td>A resizeEnd event for jQuery.</td>
                                        </tr>
                                        <tr>
                                            <td>Magic Check</td>
                                            <td>v1.0.3</td>
                                            <td><a href="http://forsigner.com/magic-check/" target="_blank" class="btn-link">http://forsigner.com/magic-check/</a></td>
                                            <td>Beautify Radio and Checkbox with pure CSS.</td>
                                        </tr>
                                        <tr>
                                            <td>Masked Input</td>
                                            <td>v1.4.0</td>
                                            <td><a href="http://digitalbush.com/projects/masked-input-plugin/" target="_blank" class="btn-link">http://digitalbush.com/projects/masked-input-plugin/</a></td>
                                            <td>This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).</td>
                                        </tr>
                                        <tr>
                                            <td>MetisMenu</td>
                                            <td>v2.5.2</td>
                                            <td><a href="http://demo.onokumus.com/metisMenu/" target="_blank" class="btn-link">http://demo.onokumus.com/metisMenu/</a></td>
                                            <td>Easy menu jQuery plugin for Twitter Bootstrap 3</td>
                                        </tr>
                                        <tr>
                                            <td>MorrisJS</td>
                                            <td>v0.5.1</td>
                                            <td><a href="http://morrisjs.github.io/morris.js/" target="_blank" class="btn-link">http://morrisjs.github.io/morris.js/</a></td>
                                            <td>Good-looking charts shouldn't be difficult </td>
                                        </tr>
                                        <tr>
                                            <td>NanoScrollerJS</td>
                                            <td>v0.8.7</td>
                                            <td><a href="http://jamesflorentino.github.io/nanoScrollerJS/" target="_blank" class="btn-link">http://jamesflorentino.github.io/nanoScrollerJS/</a></td>
                                            <td>nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website.</td>
                                        </tr>
                                        <tr>
                                            <td>noUiSlider</td>
                                            <td>v8.3.0</td>
                                            <td><a href="http://refreshless.com/nouislider/" target="_blank" class="btn-link">http://refreshless.com/nouislider/</a></td>
                                            <td>noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible.</td>
                                        </tr>
                                        <tr>
                                            <td>Pace</td>
                                            <td>v0.7.6</td>
                                            <td><a href="http://github.hubspot.com/pace/" target="_blank" class="btn-link">http://github.hubspot.com/pace/</a></td>
                                            <td>Automatic page load progress bar.</td>
                                        </tr>
                                        <tr>
                                            <td>Select2</td>
                                            <td>v4.0.3</td>
                                            <td><a href="https://select2.github.io/" target="_blank" class="btn-link">https://select2.github.io/</a></td>
                                            <td>Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.</td>
                                        </tr>
                                        <tr>
                                            <td>Skycons</td>
                                            <td>v0.7.1</td>
                                            <td><a href="http://darkskyapp.github.io/skycons/" target="_blank" class="btn-link">http://darkskyapp.github.io/skycons/</a></td>
                                            <td>Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.</td>
                                        </tr>
                                        <tr>
                                            <td>Sparkline</td>
                                            <td>v2.1.2</td>
                                            <td><a href="http://omnipotent.net/jquery.sparkline/#s-about" target="_blank" class="btn-link">http://omnipotent.net/jquery.sparkline/#s-about</a></td>
                                            <td>This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.</td>
                                        </tr>
                                        <tr>
                                            <td>Summernote</td>
                                            <td>v0.8.1</td>
                                            <td><a href="http://summernote.org/" target="_blank" class="btn-link">http://summernote.org/</a></td>
                                            <td>Super Simple WYSIWYG Editor on Bootstrap</td>
                                        </tr>
                                        <tr>
                                            <td>Switchery</td>
                                            <td>v0.8.1</td>
                                            <td><a href="http://abpetkov.github.io/switchery/" target="_blank" class="btn-link">http://abpetkov.github.io/switchery/</a></td>
                                            <td>Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps.</td>
                                        </tr>
                                        <tr>
                                            <td>X-editable</td>
                                            <td>v1.5.1</td>
                                            <td><a href="http://vitalets.github.io/x-editable/" target="_blank" class="btn-link">http://vitalets.github.io/x-editable/</a></td>
                                            <td>This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes.</td>
                                        </tr>
                                    </tbody>
                                </table>


                            </div>











                            <footer>
                                <div class="pad-ver pad-top">
                                    <p class="text-lg">Once again, thank you so much for purchasing this template. As we said at the beginning, we'd be glad to help you if you have any questions relating to this template. No guarantees, but we'll do our best to assist.</p>
                                    <br>
                                    <p class="text-lg text-semibold text-main">Have a nice day and happy coding!</p>
                                    <hr class="new-section-sm bord-no">
                                    <a href="http://www.themeon.net" target="_blank" class="btn-link text-lg text-bold box-block"><i>ThemeOn</i></a>
                                    <small class="text-muted">http://themeon.net</small>
                                </div>
                            </footer>
                        </div><!--/docs content-->
                    </div>
                </div>

            </div><!--/.container-->

        </div>

        <!-- Bootstrap core JavaScript -->
        <!-- ================================================== -->
        <script src="../demo/js/jquery-2.2.4.min.js"></script>
        <script src="../demo/js/bootstrap.min.js"></script>


        <!-- Nifty Core -->
        <script src="../demo/js/nifty.min.js"></script>


        <!-- Documentation JS -->
        <script src="js/prettify.js"></script>
        <script src="js/docs.js"></script>

    </body>
</html>
